<template>
    <div>
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="150px" class="demo-ruleForm">

            <div class="container"  style="margin-top:20px">
                <h3 style="margin-bottom: 20px">产销对接</h3>

                <el-row>
                    <el-col :span="10">
                        <el-form-item label="一级分类：" prop="checkName">
                           <el-select v-model="namea"  value-key="id" filterable placeholder="请选择" style="width: 300px;" :disabled="disabled">
                                <el-option
                                    v-for="item in basesourcelist"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item"
                                >
                                {{item.name}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
					<el-col :span="10">
						<el-form-item label="二级分类：" >
						   <el-select v-model="names"  value-key="id" filterable placeholder="请选择" style="width: 300px;"  :disabled="disabled">
						        <el-option
						            v-for="item in twoClassify"
						            :key="item.id"
						            :label="item.name"
						            :value="item"
						        >
						        {{item.name}}
						        </el-option>
						    </el-select>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label="标题：" prop="quality">
						    <el-input placeholder="请输入内容" v-model="ruleForm.titleName" style="width:300px" :disabled="disabled">
						    </el-input>
						</el-form-item>
					</el-col>
                </el-row>
				<el-row>
				    <el-col :span="22">
				        <el-form-item label="产品介绍：" prop="introduce">
				            <div ref="editor" style="width:100%;" :disabled="disabled"></div>
				        </el-form-item>
				    </el-col>
				</el-row>
            </div>



        </el-form>
    </div>
</template>

<script>
	import axios from "axios"
	import {scienceInfo_tree,scienceInfo_save,scienceInfo_findById} from "@/request/api"
    import uploadImg from '../../../common/uploadImg';
    import E from 'wangeditor';
    export default {
        data(){
            return{
				disabled:true,
				namea:"",
				names:"",
				twoClassify:[],
                basesourcelist:[

				],
                img:'',
                s:'',
                 radio:1,
                type:[
                    {name:1}
                ],
                // ifshow:true,
                imgurl:'',
                show:true,
                labelPosition:'right',
                // showForm: false,
                ruleForm: {
                     titleName:'' ,
					 content:'',
					 secondId:''
                },
				arr:{},
                listUrl:'',
                id:'',
                rules:{
                    relatedProducts: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],

                }
            }
        },
        mounted(){
             this.id= this.$route.query.id
			this.gettree()



             var editor = new E(this.$refs.editor)


            editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
            editor.customConfig.uploadFileName = 'files';
            editor.customConfig.uploadImgHooks = {
                customInsert: function (insertImg, result, editor) {
                    console.log(insertImg)
                    // var url =  "http://" + window.location.host + "/file/show/" +  result.data
					var url = "http://grove.cpzsyun.com:81/api/plant/file/show/" + result.data.fileName
                    insertImg(url)

                }
            }
	        editor.customConfig.onchange = (html) => {
                this.ruleForm.content = html
            }
	        editor.create();
			editor.$textElem.attr('contenteditable', false)
			// editor.disable();
	        editor.txt.html(this.ruleForm.content)
        },
        methods:{

			getclassify(e){
				this.names= {}
				this.twoClassify = e.secondList
			},
			getnames(e){
				this.ruleForm.secondId = e.id
			},
			gettree(){

				axios.get("http://grove.cpzsyun.com:81/api/control/scienceInfo/tree").then((res)=>{
					this.basesourcelist = res.data
					if(this.id == undefined){

					}else{


						this.init()
					}
				})

			},
            init(){
				axios.get("http://grove.cpzsyun.com:81/api/control/scienceInfo/findById/"+ this.id).then((res)=>{
					// console.log(res.data.data[0])
					this.arr = res.data.data[0]
					this.ruleForm.titleName = this.arr.title_name
					this.namea = this.arr.topName
					this.ruleForm.secondId = this.arr.secondId
					this.names = this.arr.secondName
					this.ruleForm.content = this.arr.content
					this.ruleForm.id = this.arr.id



					for(var i = 0;i<this.basesourcelist.length;i++){
						console.log(this.basesourcelist[i].name == this.arr.topName)
						if(this.basesourcelist[i].name == this.arr.topName){

							this.twoClassify = this.basesourcelist[i].secondList
						}
					}

					if(this.arr.content){
						var editor = new E(this.$refs.editor)


						editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
						editor.customConfig.uploadFileName = 'files';
						editor.customConfig.uploadImgHooks = {
							customInsert: function (insertImg, result, editor) {
								// console.log(this.$store.state.imageUrls)
								var url = "http://grove.cpzsyun.com:81/api/plant/file/show/" + result.data.fileName
								insertImg(url)

							}
						}
						editor.customConfig.onchange = (html) => {
							this.ruleForm.content = html
						}
						editor.create();
						editor.$textElem.attr('contenteditable', false)
						// editor.disable();
						editor.txt.html(this.ruleForm.content)
					}
				})

            },



        }
    }
</script>

<style scoped>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .el-upload--text{
      width:180px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
